<template>
  <div class="container">
    <div class="app-container">
      <el-button type="primary" size="mini" style="margin:10px">主要按钮</el-button>
      <el-table :default-expand-all="true" :data="permissionList" row-key="id">
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" align="center" prop="code" />
        <el-table-column label="描述" align="center" prop="description" />
        <el-table-column label="操作" align="center">
          <template v-slot="{row}">
            <el-button v-if="row.type===1" type="text" size="mini" @click="addPermission(row)">添加</el-button>
            <el-button type="text" size="mini" @click="editPermission(row)">编辑</el-button>
            <el-popconfirm
              title="确定删除吗？"
              @onConfirm="deletePermission(row.id)"
            >
              <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <permission-dialog ref="permissionDialog" @refresh="getPermissionList" />
    </div>
  </div>
</template>
<script>
import { getpermissionList, deletepermission } from '@/api/permission'
import { transListToTreeData } from '@/utils/index'
import permissionDialog from './component/permissionDialog.vue'

export default {
  name: 'Permission',
  components: { permissionDialog },
  data() {
    return {
      permissionList: [],
      permissionDialog: null

    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() {
      const res = await getpermissionList()
      this.permissionList = transListToTreeData(res, 0)
      console.log(res)
    },
    addPermission(row) {
      this.$refs.permissionDialog.open('add', row)
    },
    editPermission(row) {
      this.$refs.permissionDialog.open('edit', row)
    },
    async deletePermission(id) {
      console.log(id)
      await deletepermission(id)
      this.$message.success('删除成功')
      this.getPermissionList()
    }

  }
}
</script>
